<template>
  <div>
  <div id="home" class="home">
    <swiper loop auto :list="list_01" v-model="index_01" @on-index-change="indexChange"></swiper>
  </div>
  <div>
    <template>
      <div id="RankList">
        <div style="padding: 15px;">
          <button-tab v-model="sel">
            <button-tab-item  @on-item-click="init()">上年度</button-tab-item>
            <button-tab-item  @on-item-click="init()">上季度</button-tab-item>
            <button-tab-item selected @on-item-click="init()">本季度</button-tab-item>
            <button-tab-item  @on-item-click="init()">本月度</button-tab-item>
          </button-tab>
        </div>
        <table class="c-table">
          <thead>
              <tr>
                  <th>排名</th>
                  <th class="opr-toplist-right">绩效分</th>
                  <th class="opr-toplist-right">额外分</th>
                  <th v-if="sel==3" class="opr-toplist-right">待审核</th>
                  <th class="opr-toplist-right">总分</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="(sitem,index) in sorcelist">
                <td><span><span class="c-index c-gap-icon-right-small" :class='"c-index-hot"+index'>{{index+1}}</span>{{sitem.userName}}</span></td>
                <td class="opr-toplist-right">{{sitem.performanceScore}}</td>
                <td class="opr-toplist-right">{{sitem.auditScore}}</td>
                <td v-if="sel==3" class="opr-toplist-right">{{sitem.additionalScore}}</td>
                <td class="opr-toplist-right">{{sitem.sumScore}}</td>
              </tr>
          </tbody>
        </table>
      </div>
    </template>
  </div>
  </div>
</template>

<i18n>
This Year:
  zh-CN: 本年
This Season:
  zh-CN: 本季度
This Month:
  zh-CN: 本月
</i18n>

<script>
import {Swiper, ButtonTab, ButtonTabItem, Divider } from 'vux'

const baseList = [{
  url: 'javascript:',
  img: 'https://static.vux.li/demo/1.jpg',
  title: '示图A'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/2.jpg',
  title: '示图B'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '示图C',
  fallbackImg: 'https://static.vux.li/demo/3.jpg'
}]
const urlList = baseList.map((item, index) => ({
  url: 'javascript:',
  img: item.img,
  fallbackImg: item.fallbackImg,
  title: `图片${item.title}`
}))

export default {
  components: {
    Swiper,
    ButtonTab,
    ButtonTabItem,
    Divider
  },
  data: function () {
    var ms_staffId = localStorage.getItem('ms_staffId')
    return {
      staffId: ms_staffId, 
      list_01: urlList,
      index_01: 0,
      sorcelist: [],
      date: [],
      sel: 2
    }
  },
  mounted: function () {
    this.init()
  },
  methods: {
    indexChange (index) {
      this.index_01 = index
    },
    init: function () {
      var self = this
      var url = '../wx/rank'
      if (self.sel == 3) {
        url = '../wx/rank/month'
      }
      self.$ajax({
        method: 'get',
        url: url,
        params: {
          staffId: self.staffId,
          scoreType: self.sel
        }
      })
      .then(function (res) {
        console.log(res)
        self.sorcelist = res.data
      })
      .catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.opr-toplist-right{
  padding-right: 5px;
  text-align: center;
  white-space: nowrap;
}
.home {
  text-align: center;
  background-color: #fff;
}
.home-img {
  max-width: 100%;
  height: auto;
}
.desc {
  color: #999;
  font-size: 12px;
}
.c-index {
  display: inline-block;
  padding: 1px 0;
  color: #fff;
  width: 18px;
  line-height: 100%;
  font-size: 14px;
  text-align: center;
  background-color: #8eb9f5;
}
.c-index-hot0 {
  background-color: #f54545;
}
.c-index-hot1 {
  background-color: #ff8547;
}
.c-index-hot2 {
  background-color: #ffac38;
}
.c-gap-icon-right-small {
    margin-right: 5px;
}
.cr-content .c-table th:first-child, .cr-content .c-table td:first-child {
  padding-left: 0;
}
.c-table th {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: 400;
  color: #666;
  border-color: #f0f0f0;
  white-space: nowrap;
  background-color: #fafafa;
}
.c-table th, .c-table td {
  padding-left: 10px;
  line-height: 1.54;
  font-size: 14px;
  border-bottom: 1px solid #f3f3f3;
  text-align: left;
}
body, th, td, .p1, .p2 {
  font-family: arial;
}
td, th {
  text-align: center;
  display: table-cell;
  vertical-align: inherit;
}

</style>